﻿@{
    ViewBag.Title = "Home Page";
}
@using DemoSignalRChat.ViewModels
@using DemoSignalRChat.Preview
@model UserViewModel

Link:
<h1>Hello world</h1>


@Html.Partial("_PostStatus", new StatusViewModel())

<hr />

<h2>Chat - @Model.UserName <input type="button" value="new chat" id="new-chat" />  <input type="button" value="Turn Off Chat" id="turn-off-chat" /> </h2>
<div class="container">
    <div class="col-md-10">

        <div class="row">
            @*@foreach (Img i in ViewBag.imgSrcs)
                {
                    <h2>width: @i.Width - height: @i.Height</h2>
                    <img src="@i.Src" />
                    <br />
                }*@
        </div>

        <div class="row">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <ul id="discussion"></ul>
        </div>

        <h1>Upload image</h1>

        <div id="formupload" class="row">
            <div id="images">
            </div>
            <div class="browse-wrap">
                <div class="title">Choose image</div>
                <input type="file" name="etlfileToUpload" class="etlfileToUpload" title="Choose image" />
            </div>
        </div>
        <input type="button" id="btn-ajax-upload" value="ajax-upload" />
        <span id="uploading"></span>

    </div>
    <div class="col-md-2">
        @Html.Partial("_FriendList", (List<UserViewModel>)ViewBag.FriendList)
    </div>

    <div id="list-chat">
    </div>
</div>

@section scripts {

    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.0.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>

    <!-- init global variables -->
    <script>
        var userName = '@Model.UserName';
        var curUserId = '@Model.UserId';
    </script>

    <script src="~/Scripts/myScripts/Chats/server/chathubs.js"></script>

    <script src="~/Scripts/myScripts/Chats/client/onConnected.js"></script>
    <script src="~/Scripts/myScripts/Chats/client/onNewUserConnected.js"></script>

    <script src="~/Scripts/myScripts/Chats/client/offChat.js"></script>
    <script src="~/Scripts/myScripts/Chats/client/signOut.js"></script>

    <script src="~/Scripts/myScripts/Chats/openChatBox.js"></script>

    <script src="~/Scripts/myScripts/Chats/client/messageReceived.js"></script>
    <script src="~/Scripts/myScripts/Chats/client/privateMessageReceived.js"></script>

    <script src="~/Scripts/myScripts/Chats/server/sendMessageToAll.js"></script>
    <script src="~/Scripts/myScripts/Chats/server/sendPrivateMessage.js"></script>

    <script src="~/Scripts/myScripts/Chats/server/turnOffChat.js"></script>
    <script src="~/Scripts/myScripts/Chats/server/signOut.js"></script>

    <script src="~/Scripts/myScripts/Chats/replaceURLWithHTMLLinks.js"></script>
    <script src="~/Scripts/myScripts/Chats/replaceEmotion.js"></script>


    <script>
        $(document).ready(function () {

            var request;

            $("#post-status").submit(function () {

                $form = $(this);

                request = $.ajax({
                    url: "/Home/PostLink",
                    type: "POST",
                    data: $form.serialize()
                })
                    .done(function (response, textStatus, jqXHR) {
                        alert("success");
                        console.log(response);
                    })
                    .fail(function (response, textStatus, jqXHR) {
                        alert("error");
                    });

                event.preventDefault();


            });// end submit
        });// end ready

    </script>


    @* upload image *@
    <script>
        $("#btn-ajax-upload").click(function () {
            UploadFile();
        });
    </script>

    <script>
        function readURLAjax(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $("#images").append("<img src='" + e.target.result + "' />");
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        $("#formupload").on("change", ".etlfileToUpload", function () {
            readURLAjax(this);
            //alert($(this).attr("class"));
            $(".browse-wrap").append("<input type='file' name='etlfileToUpload' class='etlfileToUpload' />");
            $(this).hide('fast');
        });
    </script>

    <script>
            // Call this function on upload button click after user has selected the file
            function UploadFile() {
                var eles = document.getElementsByClassName('etlfileToUpload');

                //for(var i = 0; i < eles.length; i++)
                //{
                //    console.log(eles[i].files[0]);
                //}

                //console.log(files);

                for(var i = 0; i < eles.length; i++)
                {
                    var file = eles[i].files[0]

                    //var fileName = file.name;
                    var fd = new FormData();
                    fd.append("fileData", file);
                    var xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (evt) { UploadProgress(evt); }, false);
                    xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
                    xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
                    xhr.addEventListener("abort", function (evt) { UploadCanceled(evt); }, false);
                    xhr.open("POST", "@Url.Action("Upload","Home")", true);
                        xhr.send(fd);
                }
            }


            function UploadProgress(evt) {
                if (evt.lengthComputable) {

                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    while (percentComplete < 100)
                    {
                        UploadProgress(evt);
                    }
                    $("#uploading").text(percentComplete + "% ");
                }
            }

            function UploadComplete(evt) {
                if (evt.target.status == 200)
                    //alert(evt.target.responseText);
                    console.log("complete");
                else {
                    alert("Error Uploading File");
                }
            }

            function UploadFailed(evt) {
                alert("There was an error attempting to upload the file.");
            }

    </script>
}


